<template>
  <div class="search-contianer">
      <head-top title="搜索"></head-top>
      
      <form action="" class="search-form" @submit.prevent="search">
          <input type="text" placeholder="请输入搜索内容" class="search-input" v-model="keyword">
          <input type="submit" class="search-submit">
      </form>
      <div class="search-list" v-if="!noShops">
          <ul class="list-container">
              <router-link :to="{path:'/shop',query:{id:item.id}}" tag="li" class="list-item" 
              v-for="item in searchShops" :key="item.id">
                  <div class="img">
                      <img class="img-content" :src="imgBaseUrl + item.image_path" alt="">
                  </div>
                  <div class="list-detail">
                      <span class="name">{{item.name}}</span>
                      <span class="sell-month">月销{{item.month_sales || item.recent_order_num}}单</span>
                      <span class="send-cost">{{item.delivery_fee}}元起送/距离{{item.float_mininum_order_amount}}m</span>
                  </div>
              </router-link>
          </ul>
      </div>
      <div class="no-shops" v-else>很抱歉，没有搜索到相关数据！</div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import HeadTop from '../../components/HeadTop/HeadTop.vue'
export default {
    components:{
        HeadTop
    },
    data () {
        return {
            keyword:'',
            imgBaseUrl:'http://cangdu.org:8001/img/',
            noShops:false,
        }
    },
    methods:{
        search(){
            const keyword = this.keyword.trim()
            if(keyword){
                this.noShops = false
                this.$store.dispatch('getSearchShops',keyword)
            }
        }
    },
    computed:{
        ...mapState(['searchShops'])
    },
    watch:{
        searchShops(value){
            if(!value.length){
                this.noShops = true
            }
        }
    }
}
</script>

<style lang="less" scoped>

.search-contianer{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .search-form{
        margin-top: 55px;
        background-color: #fff;
        padding: 12px 8px;
        display: flex;
        input{
            height: 35px;
            padding: 0 4px;
            border-radius: 2px;
            font-weight: bold;
            outline: none;
            &.search-input{
                width: 79%;
                border: 1px solid lightgray;
                margin-right: 5px;
                background-color: rgb(239, 237, 237);
                font-size: 13px;
            }
            &.search-submit{
                width: 21%;
                background-color: lightseagreen;
            }
        }
    }
    .search-list{
        margin-top: 10px;
        .list-container{
            background-color: #fff;
            .list-item{
                display: flex;
                justify-content: center;
                padding: 10px;
                border-bottom: 1px solid lightgray;
                .img{
                    margin-right: 10px;
                    .img-content{
                        height: 50px;
                        width: 50px;
                        display: block;
                    }
                }
                .list-detail{
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    font-size: 12px;
                    line-height: 18px;
                }
            }
        }
    }
    .no-shops{
        margin: 0 auto;
        color: #333;
        background-color: #fff;
        text-align: center;
        margin-top: 0.125rem;
        
    }
}

</style>